<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        html,body{
            background-color: #FFFFFF;
            /*background: transparent;*/
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .master-block {
            width: 100%;
            height: 1.10rem;
            border-color: #EEEEEE;
            border-style:solid;
            border-bottom-width: 0.01rem;
            align-items: center;
        }
        .master-image {
            width: 0.70rem;
            height: 0.70rem;
            background-size: 0.70rem 0.70rem;
            border-radius: 0.35rem;
            margin-left: 0.16rem;
        }
        .master-skill {
            padding-left: 0.07rem;
            padding-right: 0.07rem;
            height: 0.19rem;
            border-radius: 0.02rem;
            background-color: #F6F3F3;
            font-size: 0.12rem;
            line-height: 0.19rem;
            color: #643332;
            text-align: center;
            margin-right: 0.08rem;
        }
        .time-icon {
            width: 0.12rem;
            height: 0.12rem;
            background-size: 0.12rem 0.12rem;
            margin-right: 0.08rem;
            background-image: url(../image/inquiry/time-icon.png);
        }
        p {
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break:break-all;
            -webkit-line-clamp: 1; /* 控制显示的行数 */
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
<div id="master-list"></div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript">
    var masterListEl;
    var pageNum = 1;
    apiready = function () {
        masterListEl = $api.byId('master-list');

        getMasterList();

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:1000
            }
        }, function(ret, err){
            getMasterList();
        });

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getMasterList() {
        api.ajax({
            url: apiUrl + '/inquiry/master-list',
            tag: '/inquiry/master-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    page_size: 20,
                    page_num: pageNum,
                }
            }
        }, function(ret, err) {
            console.log(JSON.stringify(ret))
            if (ret) {
                if (ret.code == 0) {
                    var masterListData = ret.data;
                    if ((pageNum-1)*20 <= masterListData.total) {
                    // if ((pageNum-1)*20 <= 1) {
                        masterListData = masterListData.master_list;
                        for (var i=0,leni=masterListData.length; i<leni; i++)
                        {
                            var masterSkill = masterListData[i]["skill"], skill = '';
                            for (var s=0,lens=masterSkill.length; s<lens; s++)
                            {

                                skill += '<div class="master-skill">' + masterSkill[s] + '</div>'
                            }

                            $api.append(masterListEl,
                                '<div id=' + "m-" + masterListData[i]["master_id"] + ' class="flex master-block" tapmode onclick="openMasterInfoWin(this)">' +
                                    '<div class="master-image" style="background-image: url(' + masterListData[i]['avatar'] + ')"></div>' +
                                    '<div style="width: 2.60rem; height: 0.70rem; margin-left: 0.14rem">' +
                                        '<div class="flex" style="width: 100%; height: 0.22rem; align-items: flex-end;">' +
                                            '<p style="font-size: 0.16rem; line-height: 0.22rem; color: #231313; font-weight: 600; margin-right: 0.06rem">' + masterListData[i]['name'] + '</p>' +
                                            '<p style="font-size: 0.12rem; line-height: 0.17rem; color: #7C7272;">' + masterListData[i]['slogan'] + '</p>' +
                                        '</div>' +
                                        '<div class="flex" style="width: 100%; height: 0.19rem; margin-top: 0.06rem; align-items: center;">' +
                                            skill +
                                        '</div>' +
                                        '<div class="flex" style="width: 100%; height: 0.17rem; margin-top: 0.06rem; align-items: center;">' +
                                            '<div class="time-icon"></div>' +
                                            '<p style="font-size: 0.12rem; line-height: 0.17rem; color: #7C7272;">' + masterListData[i]['online'] + '</p>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>');
                        }
                    }
                    pageNum ++;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openMasterInfoWin(el) {
        var id, videoId;
        id = $api.attr(el,'id');
        masterId = id.substring(2);
        api.openWin({
            name: 'masterWin',
            url: './inquiry/masterWin.html',
            slidBackType: 'edge',
            pageParam: {
                master_id: masterId,
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
